import React, { Component } from "react";
import { Modal } from "antd-mobile";
import "./style.less";
import Request, { Delete, Get } from "./../../utils/request";
import LogoPng from "./logo.png";
class Page extends Component {
  state = {
    id: '',
    detail: null,
    can: false
  };
  componentDidMount() {
    console.log(this.props);
    let keys = window.location.href.split('/');
    this.setState({
      id: keys[keys.length - 1]
    }, () => {
      this.getInfo();
    })
    document.getElementById("root").style.minWidth = window.screen.width + "px";
    document.getElementById("root").style.width = window.screen.width + "px";
  }
  exchange() {
    ajaxRequest(
      "get",
      window.location.origin+"/sys/hexiao.txt?random" + Math.random(),
      data => {
        console.log("请求txt结果为:" + data);
        if (data == "0") {
          Modal.alert({
            content: "核销已结束",
            onConfirm: () => {
              console.log("Confirmed");
            },
          });
          return;
        }
        if (this.state.detail.prize_state == "未使用") {
          Modal.confirm({
            title: "兑现",
            content: "确认兑现吗？",
            okText: "确认",
            cancelText: "取消",
            onConfirm: () => {
              Request("/mss/lottery/exchange", {
                sha: this.state.id
              }).then(() => {
                Modal.alert({
                  content: "兑现成功,2s后返回",
                  onConfirm: () => {
                    console.log("Confirmed");
                  },
                });
                
                this.getInfo();

                setTimeout(() => {
                   window.history.go(-1);
                }, 2000);
              });
            }
          });
        }
      }
    );
  }
  getInfo() {
    Get("/mss/prize/get/" + this.state.id, {}).then(res => {
      let data = res.data;
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\n/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r/g,
        "<br />"
      );
      data["prize"]["explain"] = data["prize"]["explain"].replace(
        /\r\n/g,
        "<br />"
      );
      this.setState({
        detail: res.data
      });
    });
  }
  render() {
    const { text } = this.props;
    const { detail } = this.state;
    return (
      <div className={'duijiang-container'}>
        <img
          className={'logopng'}
          onClick={() => {
            window.location.href =
              window.location.origin + "/#/home";
          }}
          src={LogoPng}
        />
        {detail ? (
          <div className={'wrap'}>
            <div className={'jpTitle'}>奖品信息</div>
            <div
              className={
                detail.prize_state == "已使用" ? 'jpName1' : 'jpName'
              }
            >
              {detail.prize.name}
            </div>
            <div
              className={
                detail.prize_state == "已使用"
                  ? 'jpStatus1'
                  : 'jpStatus'
              }
              onClick={() => this.exchange()}
            >
              {detail.prize_state == "未使用" ? "兑现" : detail.prize_state}
            </div>
            <div className="jpSAddressLine"></div>
            <div
              className={'jpSAddress'}
              dangerouslySetInnerHTML={{ __html: detail["prize"]["explain"] }}
            ></div>
          </div>
        ) : (
          <div></div>
        )}
      </div>
    );
  }
}

export default Page;

function ajaxRequest(type, url, callback) {
  var type = type,
    url = url,
    callback = callback;

  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open(type, url, true);
  xmlhttp.send(null);
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      if (xmlhttp.status == 200) {
        callback(json_encode(xmlhttp.responseText));
      }
    }
  };
}

function json_encode(txt) {
  return txt;
}
